React Native for Android 学习
前言Facebook 在2015.9.15发布了 React Native for Android，把 JavaScript 开发技术扩展到了移动Android平台。基于React的React Native 让前端开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 基于Web，iOS 和 Android 平台的原生应用。在React Native for Android出来之后，本人花了些时间从环境搭...
2024-01-10
react-navigation android 导航标题居中
先贴下代码供参考：安卓默认导航的titile 是在左侧的，为了和iOS保持一致，需要添加 alignSelf:'center',这个 属性 但是会遇到title有点偏右的情况添加headerRight 这个属性，就OK 了，仅此手记，供各位参考参考：https://github.com/react-community/react-navigation/issues/544...
2024-01-10
mac react-native从零开始android真机测试
1. 安装android相关jdk，(https://blog.csdn.net/vvv_110/article/details/72897142)2. 手机和mac使用usb连接， 手机开发者设置中打开use调试设置， 保证手机和电脑在统一wifi下。3. 在终端进入到react-native目录下执行 react-native run-android4. 然后该命令会开启一个服务，该程序首先会自动找 ~ ./gradle文件，如果有需要的gradle...
2024-01-10
android 架构之集成react native框架js混编APP
本篇文章主要总结一下现在APP当中使用的js、webView混编架构和技术。什么是 js 混编？js混编简单说就是使用JavaScript开发APP程序。android应用使用的是java，Kotlin 、c/c++ 为主的语言开发，ios使用的object-c 、 swift、c/c++ 为主语言开发，由于市场是基本都是android和ios手机，所以一般公司开发什么项目androi...
2024-01-10
React Native for Android 学习笔记
C:\Users\Vic Lee\AwesomeProject>react-native run-androidStarting JS server...Running D:\Android\sdk/platform-tools/adb reverse tcp:8081 tcp:8081error: closedCould not run adb reverse: Command failed: D:\Android\sdk/platform-tools/adb reverse tcp:8081 tcp:8...
2024-01-10
React Native工程修改Android包名
默认初始化的React Native工程，生成Android工程的时候，包名默认是React Native工程的名字，跟一般Android工程com.company.xxx不一样。这时候就需要手动修改Android工程里面的包名信息：如下：首先修改React Native目录下的MainActivity.java的包名，具体路径是（android/app/src/main/java/com/PROJECT_NAME/MainActivity.java）修改 p...
2024-01-10
react native xcode修改项目名
1. 选中旧工程名，改为新的然后选择rename2. 依次选择黄色文件夹，修改名字，千万不要在Xcode外修改！！！修改结果为3. 点击搜索，搜索旧项目名点击Find，改为Replace全部替换掉4. 此时，还剩下一些需要手动修改，再次查找直至全部没有为止5. 进入Tests和UITests文件夹，修改文件名，千万不...
2024-01-10
React Native的android API -ReactAndroid开源项目
ReactAndroid是React Native的android开源项目；React Native源码：https://github.com/facebook/react-native/tree/master/ReactAndroidReact Native的Android API不同版本的React Native Android API和React Native Android源码；项目目录的node_modules\react-native\android\com\facebook\react\rea...
2024-01-10
react项目npm run dev报错;
项目启动报错，各种百度也没找到是什么问题，而且也没有报是什么原因造成的，希望大佬们指点一下，在线急。const render = (Component) => {ReactDOM.render(<Provider store={store}><AppContainer><BrowserRouter basename='/'><Route path={`/`} component={App}></Route></BrowserRouter></AppContainer></Provider>,document...
2024-01-10
react middleware详解
自：https://www.jianshu.com/p/f4166120489b?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation为什么dispatch需要middleware？middle.png上图表达的是 redux 中一个简单的同步数据流动的场景，点击 button 后，在回调中 dispatch 一个 action，reducer 收到 action 后，更新 state 并...
2024-01-10
react-native上手之环境搭建及连接模拟器 - Diamond_xx
react-native上手之环境搭建及连接模拟器 使用react-native创建应用app，环境搭建很重要。我使用的是夜神模拟器进行模拟。环境搭建1.安装java jdk （1）官网下载java jdk安装包，傻瓜式安装，下一步 下一步 （2）配置环境变量修改环境变量，新增JAVA_HOME的系统环境变量，...
2024-01-10
react native 如何mock自己编写的native module？
在编写RN时使用到了原生模块，在npm test进行测试的时候遇到了问题。网上谷歌了一遍发现需要mock自己编写的native module，但是现在遇到了以下问题：现在mock 原生模块使用以下方式describe('MypageApi', () => { beforeEach(() => { NativeModules.MyPageApiFunction = { getMyPageInfo: () => { myPageInfo =...
2024-01-10
angular vue react 启动命令
vue: npm install vue-cli -g vue init webpack my-project npm install npm run devangular: npm install -g typescript npm install -g @angular/cli ng new my-project npm install npm start (ng serve)react: npm install -g create-react-app create-react-app react-p...
2024-01-10
使用WebStorm开发React Native调试Android项目
React-Native自带的打印log的命令android : react-native log-androidios : react-native log-iosandroid studio调试习惯了,然后在webstorm调试react-native找到了一个调试插件:react-native-console 可以直接从webstorm的设置中添加插件File>>Settings>>Plugins>>搜索React Native Console 安装之后重启webstorm就ok了控制台效果...
2024-01-10
Why React Is Favored by Front-End Specialists
In this section, we will discuss some of the features that make React a superior choice for front-end developers. Have a look:The Virtual DOM: As discussed above, React.js brought in the helpful Virtual DOM - a virtual browser infinite times friendlier tha...
2024-01-10
react-native textArea 高度不变化问题
ref={el =>{ if(el){ el.textareaRef.style.height = el.textareaRef.scrollHeight + 'px'; } } } ...
2024-01-10
react+antd-mobile之TabBar路由
想了解create-react-app配置antd-mobile按需加载，以及配置less和vw的可以看上一篇博客这一篇特别记录antd-mobile的TabBar配合路由的使用按照antd-mobile给出的文档，可以构建出此UI页面（相信都能做到）目前的这个是没有加路由的，我想要的是，点击我的，地址栏的URL可以改成http://localhost:3000/my，在网上看...
2024-01-10
React Native react-navigation 导航使用详解
一、开源库介绍今年1月份，新开源的react-natvigation库备受瞩目。在短短不到3个月的时间，github上星数已达4000+。Fb推荐使用库，并且在React Native当前最新版本0.44中将Navigator删除。react-navigation据称有原生般的性能体验效果。可能会成为未来React Native导航组件的主流军。本篇内容基于【 ^1.0.0-beta.9 】版本...
2024-01-10![[React Native]访问操作系统剪贴板 Clipboard](/wp-content/uploads/thumbs/534337_thumbnail.jpg)
[React Native]访问操作系统剪贴板 Clipboard
我们之前学习了TextInput组件, 有时候我们需要在TextInput组件中复制或者粘贴一些文字。 React Native为开发者提供了 Clipboard API,Clipboard 组件可以在iOS和Android的剪贴板中读写内容。目前还只支持获取或者存放字符串。static getString() 获取剪贴板的文本内容，返回一个Promise(后面会介绍) 你可以用下面的方式...
2024-01-10
Windows下配置React-native环境问题总结
从最近移动端市场的需求来看，Android原生开发已经危机重重，混合开发的大趋势已经越来越难以忽视了。不迎合趋势注定会被时代淘汰，因此选择了有FaceBook技术背书的Reactive Native作为混合开发的切入技术。这篇博客是开篇，后面会有系列文章记录学习Reactive Native的成长，希望能帮助到后来的人，尤其...
2024-01-10
React Native移动开发实战-5-Android平台的调试技巧
Android平台的调试和其他平台的调试也很类似，例如：在Android Studio打开的工程中，打开源码MainActivity.java，然后，将鼠标移至代码编辑区的左侧后，单击鼠标即可添加断点，接着，选择菜单Debug -> Debug ‘app’，即可调试Android应用，效果如图5.12所示。图5.12 Android原生项目断点调试 如果要调试...
2024-01-10
ReactNative 本地文件访问 react-native-fs Android配置所遇到的坑
事件背景：react-native-fs配置完毕之后在Android无法使用，无法编译通过；安装：npm install react-native-fs --save如果 RN版本<0.57或者Gradle < 3：需要安装：npm install [email protected]–save本人的RN版本0.44.3所以遇到了坑，官方npm上的配置也一步步配置了，发现在ios没有问题，但是在android上不能运行，不能编译通...
2024-01-10
React Native未来导航者：react-navigation 使用详解
该库包含三类组件：（1）StackNavigator：用来跳转页面和传递参数（2）TabNavigator：类似底部导航栏，用来在同一屏幕下切换不同界面（3）DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉导航的屏幕react-navigation使用 具体内容大致分为如下：（1）react-navigation库属性介绍（2）StackNavigator、TabNavig...
2024-01-10
Android Native 内存泄漏系统化解决方案
导读：C++内存泄漏问题的分析、定位一直是Android平台上困扰开发人员的难题。因为地图渲染、导航等核心功能对性能要求很高，高德地图APP中存在大量的C++代码。解决这个问题对于产品质量尤为重要和关键，高德地图技术团队在实践中形成了一套自己的解决方案。分析和定位内存泄漏问题的核心在于...
2024-01-10
react typescript FunctionComponent antd crud
这个界面跟之前VUE做的一样。并无任何不同之处，只是用react重复实现了一遍。import React, { useState, useEffect } from 'react';import { Row, Col, Table, Form, Cascader, Input, Button, Modal, message } from 'antd';import { FormComponentProps } from 'antd/lib/form';import http from '../../serv...
2024-01-10
